<!--书籍投放-->

<template>
  <el-container>

    <el-row :gutter="20" class="toolbar">
      <el-col :span="5">
        <el-input placeholder="请输入书籍名称" v-model="filters.bookName" clearable></el-input>
      </el-col>
      <el-col :span="5">
        <el-select v-model="filters.channel" placeholder="请选择频道" clearable>
          <el-option label="男频" value="WOMAN"></el-option>
          <el-option label="女频" value="MAN"></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-select v-model="filters.hasEnd" placeholder="请选择是否完结" clearable>
          <el-option label="连载" value="SERIAL"></el-option>
          <el-option label="完结" value="FINISH"></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-col>
    </el-row>

    <el-header style="margin-top: 10px">
      <el-button  type="primary" @click="openAddBookDialog">新建书籍</el-button>
      <el-button type="warning" @click="exportBooks">导出</el-button>
    </el-header>

    <el-main style="margin-top: 5px;">
      <el-table :data="books" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="cover" label="封面" header-align="center">
          <template #default="scope">
            <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.cover"
                    @click="showImage(scope.row.cover)"
            ></el-image>
          </template>
        </el-table-column>
<!--        <el-table-column prop="bookInfo" label="书籍信息" header-align="center"></el-table-column>-->
        <el-table-column prop="hasEnd" label="是否完结" header-align="center">
          <template #default="scope">
            <el-tag :type="scope.row.hasEnd == 'FINISH' ? 'success' : 'danger'">
              {{ scope.row.hasEnd == 'FINISH' ? '完结' : '连载' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="priceChapter" label="收费章节" header-align="center"></el-table-column>
        <el-table-column prop="priceWord" label="千字/元" header-align="center"></el-table-column>
        <el-table-column prop="introduction" label="简介" header-align="center"></el-table-column>
        <el-table-column prop="channel" label="频道" header-align="center"></el-table-column>
        <el-table-column prop="authorizeFrom" label="授权开始时间" header-align="center"></el-table-column>
        <el-table-column prop="authorizeTo" label="授权结束日期" header-align="center"></el-table-column>
<!--        <el-table-column prop="purchaseType" label="购买类型" header-align="center"></el-table-column>-->
        <el-table-column prop="remark" label="备注" header-align="center"></el-table-column>
        <el-table-column label="章节操作" fixed="right" width="100" header-align="center">
          <template #default="scope">
            <el-button @click="openChapterList(scope.row)" type="text" class="custom-button">章节列表</el-button>
            <el-button @click="linkManagement(scope.row)" style="margin-left: 0px" type="text" class="custom-button">链接管理</el-button>
          </template>
        </el-table-column>
        <el-table-column label="书籍操作" fixed="right" width="100" header-align="center">
          <template #default="scope">
            <el-button @click="openEditDialog(scope.row)" type="text" class="custom-button">修改</el-button>
            <el-button @click="deleteBook(scope.row)"  type="text" class="custom-button" style="color: red;margin-left: 0px">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px; display: flex; justify-content: flex-end;">
        <el-pagination
                v-model:current-page="filters.pageNum"
                v-model:page-size="filters.pageSize"
                :page-sizes="[5, 10, 20, 30]"
                :small="small"
                :disabled="disabled"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                class="doPage"
        />
      </div>

    </el-main>

    <el-dialog v-model="imageDialogVisible">
      <img :src="imageUrl" alt="image" style="width: 100%" />
    </el-dialog>

    <el-dialog title="修改书籍配置" v-model="editDialogVisible" width="500px" @close="resetAdConfigStatus">
      <el-form :model="editForm">
        <el-form-item label="收获章节">
          <el-input v-model="editForm.chapters"></el-input>
        </el-form-item>
        <el-form-item label="千字/分">
          <el-input v-model="editForm.wordsPerMinute"></el-input>
        </el-form-item>
        <el-form-item label="购买类型">
          <el-select v-model="editForm.purchaseType">
            <el-option label="章节购买" value="章节购买"></el-option>
            <el-option label="整本购买" value="整本购买"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editForm.notes" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确定</el-button>
      </div>
    </el-dialog>

    <el-drawer
            title="章节列表"
            v-model="chapterListVisible"
            direction="rtl"
            size="50%"
    >
      <el-container>
        <el-header>
          <el-input placeholder="请输入章节名称" v-model="chapterSearch" style="width: 200px; margin-bottom: 10px;" />
          <el-button type="primary" @click="searchChapters">搜索</el-button>
          <el-button @click="resetChapterSearch">重置</el-button>
        </el-header>
        <el-main style="display: flex;">
          <el-table :data="chapters" style="width: 50%; margin-top: 20px;">
            <el-table-column prop="chapterNumber" label="章节号" width="80"></el-table-column>
            <el-table-column prop="chapterTitle" label="章节标题"></el-table-column>
            <el-table-column label="链接操作" width="120">
              <template #default="scope">
                <el-button @click="openLinkDialog(scope.row)" type="text" class="custom-button">生成链接</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 50%; padding: 20px; overflow-y: auto;">
            <p v-for="(chapter, index) in chapters" :key="index">
              {{ chapter.content }}
            </p>
          </div>
        </el-main>
      </el-container>
    </el-drawer>

    <el-dialog title="投放链接配置" v-model="linkDialogVisible" width="500px" @close="resetAdConfigStatus">
      <el-form :model="linkForm">
        <el-form-item label="推广名称" required>
          <el-input v-model="linkForm.promotionName"></el-input>
        </el-form-item>
        <el-form-item label="充值模版" required>
          <el-select v-model="linkForm.reversoTemplate">
            <el-option label="模版1" value="template1"></el-option>
            <el-option label="模版2" value="template2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回传模版" required>
          <el-select v-model="linkForm.rechargeTemplate">
            <el-option label="模版1" value="template1"></el-option>
            <el-option label="模版2" value="template2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付费章节序号" required>
          <el-input v-model="linkForm.paidChapterNumber"></el-input>
        </el-form-item>
        <el-form-item label="千字价格(分)" required>
          <el-input v-model="linkForm.pricePerThousandWords"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="linkForm.notes"></el-input>
        </el-form-item>
<!--        <el-form-item label="广告配置状态">-->
<!--          <el-switch v-model="linkForm.adStatus" @change="toggleAdConfig"></el-switch>-->
<!--        </el-form-item>-->
        <div v-if="linkForm.adStatus">
          <el-form-item label="广告类型" required>
            <el-select v-model="linkForm.adType">
              <el-option label="类型1" value="type1"></el-option>
              <el-option label="类型2" value="type2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="充值回传模式" required>
            <el-radio-group v-model="linkForm.rechargeMode">
              <el-radio label="全量订单">全量订单</el-radio>
              <el-radio label="首充订单">首充订单</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="回传比例" required>
            <el-radio-group v-model="linkForm.reportRatio">
              <el-radio label="全量">全量</el-radio>
              <el-radio label="固定间隔">固定间隔</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="VIP充值上报">
            <el-switch v-model="linkForm.vipReport"></el-switch>
          </el-form-item>
          <el-form-item label="广告配置名称">
            <el-input v-model="linkForm.adConfigName"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button @click="linkDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmLinkConfig">确定</el-button>
      </div>
    </el-dialog>


    <!-- 添加书籍配置弹窗 -->
    <el-dialog v-model="bookDialogVisible" width="700px" title="添加书籍配置">
      <el-row>
        <el-col :span="24">
          <el-transfer
                  v-model="value"
                  filterable
                  :filter-method="filterMethod"
                  filter-placeholder="State Abbreviations"
                  :data="data"
                  :titles="['未配置', '已选择']"
          />
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button  style="margin-left: 400px;margin-top: 20px" @click="bookDialogVisible = false">取 消</el-button>
        <el-button style="margin-top: 20px" type="primary" @click="handleBookSubmit">提 交</el-button>
      </div>
    </el-dialog>

  </el-container>
</template>

<script  lang="ts" setup>
  import {ref, computed, onMounted} from 'vue'
  import { ElMessageBox } from 'element-plus'
  import {searchBooks,addBooks,searchBooksId} from "../../api/book/bookTran";
  import {baseApi} from "../../api/base";
  import router from "../../router";
  import { ElMessage } from 'element-plus';

  interface Option {
    key: number
    label: string
    initial: string
  }
  const listBookIds =ref([])


  const generateData = async  () => {
    const data: Option[] = []
    const states = []
    const initials = []
    const response = await searchBooksId()
    const apiData = response.data.data
    console.log(apiData)
    apiData.map((item: any) => {
      data.push({
        label: item.bookName,
        key: item.id,
        initial: item.id
      })
    })
    data.value = formattedData
    return data
  }


  const data = ref<Option[]>()
  const value = ref([])

  const filterMethod = (query, item) => {
    return item.initial.toLowerCase().includes(query.toLowerCase())
  }

  const filters = ref({
    channel: '',
    hasEnd:'',
    bookName: '',
    pageSize:10,
    pageNum:1
  })
  const total = ref(0)
  const selectedPurchaseType = ref('')
  const selectedChannel = ref('')
  const isComplete = ref('')
  const imageDialogVisible = ref(false)
  const imageUrl = ref('')
  const editDialogVisible = ref(false)
  const chapterListVisible = ref(false)
  const linkDialogVisible = ref(false)
  const bookDialogVisible = ref(false)
  const editForm = ref({
    chapters: '',
    wordsPerMinute: '',
    purchaseType: '',
    notes: ''
  })
  const linkForm = ref({
    promotionName: '',
    rechargeTemplate: '',
    reversoTemplate:'',
    paidChapterNumber: '',
    pricePerThousandWords: '',
    notes: '',
    adStatus: false,
    adType: '',
    rechargeMode: '',
    reportRatio: '',
    vipReport: false,
    adConfigName: ''
  })
  const chapterSearch = ref('')
  const currentPage = ref(1)
  const chapters = ref([
    { chapterNumber: 1, chapterTitle: '第一章', content: '第一章内容' },
    { chapterNumber: 2, chapterTitle: '第二章', content: '第二章内容' },
    { chapterNumber: 3, chapterTitle: '第三章', content: '第三章内容' },
    { chapterNumber: 4, chapterTitle: '第四章', content: '第四章内容' },
    { chapterNumber: 5, chapterTitle: '第五章', content: '第五章内容' },
    { chapterNumber: 6, chapterTitle: '第六章', content: '第六章内容' },
    { chapterNumber: 7, chapterTitle: '第七章', content: '第七章内容' },
    { chapterNumber: 8, chapterTitle: '第八章', content: '第八章内容' },
    { chapterNumber: 9, chapterTitle: '第九章', content: '第九章内容' },
    { chapterNumber: 10, chapterTitle: '第十章', content: '第十章内容' },
    { chapterNumber: 11, chapterTitle: '第十一章', content: '第十一章内容' },
    { chapterNumber: 12, chapterTitle: '第十二章', content: '第十二章内容' },
    { chapterNumber: 13, chapterTitle: '第十三章', content: '第十三章内容' }
  ])

  const books = ref([
    {
      cover:'',
      bookInfo:'',
      hasEnd:'',
      priceChapter:'',
      priceWord:'',
      introduction:'',
      channel:'',
      authorizeFrom:'',
      authorizeTo:'',
      remark:''
    }
    // Add more book data here
  ])

  const availableBooks = ref([
    { title: '111' },
    { title: '2' },
    { title: 'css' },
    { title: '333' },
    { title: '222' },
    { title: 'test001' },
    // Add more available books here
  ])
  const bookList = ref([
    { key: 1, label: '2' },
    { key: 2, label: '222' },
    { key: 3, label: 'test001' },
    { key: 4, label: '母亲抢了我的男朋友' },
    { key: 5, label: '反转结局' },
    { key: 6, label: '虫多的诅咒' },
    { key: 7, label: '环游世界' },
    // Add more books as needed
  ])
  const selectedBooks = ref([]);



  const search = () => {
    searchBooks(filters.value).then((res=>{
      console.log(res)
      if (res.data.data==null){
        books.value=null
      }else {
        books.value=res.data.data.currentData
        total.value=res.data.data.totalRecord
      }
    }))
  }

  const reset = () => {
    searchTitle.value = ''
    selectedPurchaseType.value = ''
    selectedChannel.value = ''
    isComplete.value = ''
  }

  const showImage = (url) => {
    imageUrl.value = url
    imageDialogVisible.value = true
  }

  const addBook = () => {
    // Implement add book logic here
  }

  const openEditDialog = (book) => {
    editForm.value = { ...book }
    editDialogVisible.value = true
  }

  const confirmEdit = () => {
    // Implement confirm edit logic here
    editDialogVisible.value = false
  }

  const deleteBook = (book) => {
    ElMessageBox.confirm('此操作将永久删除该书籍, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      // Implement delete logic here
    }).catch(() => {
      // Handle cancel action
    })
  }

  const exportBooks = () => {
    // Implement export logic here
  }

  const manageChapters = (book) => {
    // Implement manage chapters logic here
  }

  const linkManagement = (book) => {
    router.push('/main/PopularizeLink')
    // Implement link management logic here
  }

  const openChapterList = (book) => {
    // You can load the chapters of the book here
    chapterListVisible.value = true
  }

  const openLinkDialog = (chapter) => {
    linkForm.value.promotionName = `推广-${chapter.chapterTitle}`
    linkDialogVisible.value = true
  }

  const searchChapters = () => {
    // Implement search chapters logic here
  }

  const resetChapterSearch = () => {
    chapterSearch.value = ''
  }

  const handlePageChange = (page) => {
    currentPage.value = page
    // Implement page change logic here
  }

  const handleSizeChange = (size) => {
    filters.pageSize = size
    // Implement size change logic here
  }

  const handleCurrentChange = (page) => {
    filters.pageNum = page
    // Implement current change logic here
  }

  const confirmLinkConfig = () => {
    // Implement confirm link config logic here
    linkDialogVisible.value = false
  }

  const openAddBookDialog = () => {

    bookDialogVisible.value = true

  }


  const submitSelectedBooks = () => {
    // Implement submit logic here
    bookDialogVisible.value = false
  }

  const toggleAdConfig = (value) => {
    linkForm.value.adStatus = value
  }

  const resetAdConfigStatus = () => {
    linkForm.value.adStatus = false
  }
  onMounted(() => {
    search();
  });
</script>

<style scoped>
  .el-header {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 5px;
  }

  .el-main {
    background: #fff;
    padding: 20px;
  }

  .el-table th {
    background-color: #f5f7fa; /* Column header background color */
    color: #606266; /* Column header text color */
    text-align: center;
  }

  .el-table td {
    color: #303133; /* Column content text color */
    text-align: center;
  }

  .el-button {
    padding: 10px 20px; /* Padding for all buttons */
  }

  .el-button--text {
    color: #409EFF; /* Link button color */
  }

  .el-button--text--danger {
    color: red; /* Danger link button color */
  }

  .dialog-footer {
    text-align: right;
  }

  .el-footer {
    position: fixed;
    bottom: 20px;
    right: 20px;
  }
</style>
